<template>
  <div>
    <h3>{{dict_usage[usageId]}}批量录入</h3>
    <div class="container" :style="{backgroundColor: $store.state.user.baseColor}">
      <div class="form" :style="tableColumn.length==0?'':{pointerEvents: 'none'}">
        <el-form ref="form" :model="form" label-width="90px" :rules="rules" inline-message>
          <el-row type="flex">
            <el-col :span="12">
              <el-form-item label="创建日期" prop="createDate">
                <el-date-picker v-model="form.createDate" type="datetime" placeholder="选择日期时间" align="left" style="width: 80%;"
                   :picker-options="pickerOptions">
                </el-date-picker>
                <el-checkbox v-model="searchDataChecked" @change="searchDateChange">按此日期筛选运动员</el-checkbox>
              </el-form-item>
              <el-form-item label="测试项目" prop="templateId">
                <el-select @change="templateChange" v-model="form.templateId" collapse-tags filterable clearable placeholder="请选择" style="width: 80%;">
                  <el-option :label="item.name" :value="item.templateId" v-for="(item,index) in templateData" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="usageId==1||usageId==2" label="分类">
                <el-button-group style="display: flex;">
                  <el-select v-model="form.packageId" @change="packageChange" multiple collapse-tags filterable clearable placeholder="请选择">
                    <el-option :label="item.shortName" :value="item.packageId+''" v-for="(item,index) in packageData" :key="index">
                    </el-option>
                  </el-select>
                  <el-button @click="packageSelectAll" type="primary">全选</el-button>
                  <el-button @click="metaSortEvent" type="primary">{{metaSortText}}</el-button>
                </el-button-group>
              </el-form-item>
              <el-form-item v-else label="场景">
                <el-select v-model="form.scenarioId" collapse-tags filterable clearable placeholder="请选择">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in dict_scenario" :key="index">
                  </el-option>
                </el-select>
                <el-button @click="metaSortEvent" type="primary">{{metaSortText}}</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="usageId==3||usageId==4" label="运动项目">
                <el-select @change="templateChange" v-model="form.sportId" collapse-tags filterable clearable placeholder="请选择" style="width: 80%;">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in sportData" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="教练" prop="coachId">
                <el-select @change="coachChange" v-model="form.coachId" collapse-tags filterable clearable style="width: 80%;"
                  placeholder="请选择">
                  <el-option :label="item" :value="key" v-for="(item,key,index) in coachData" :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="运动员" prop="playerId">
                <el-button-group style="display: flex;">
                  <el-select v-model="form.playerId" multiple collapse-tags filterable clearable placeholder="请选择">
                    <el-option :label="item" :value="key" v-for="(item,key,index) in playerData" :key="index">
                    </el-option>
                  </el-select>
                  <el-button @click="form.playerId=Object.keys(playerData)" type="primary">全选</el-button>
                  <el-button @click="playerSort(true)" type="primary">人员排序</el-button>
                </el-button-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div style="width: 100%;height: 50px;position: relative;">
        <div style="position: absolute;right: 0;">
          <el-button type="success" size="small" v-if="massInputFormDataShow" @click="getLocalStorage2form" :disabled="tableColumn.length!=0" style="margin: 0 10px;">填入上一次表单</el-button>
          <el-button type="success" size="small" :icon="!loading?'el-icon-setting':'vxe-icon--refresh roll'" @click="submitEnter" :disabled="tableColumn.length!=0"
            style="margin: 0 10px;">
            开始录入</el-button>
          <vxe-button @click="tableClear" status="warning" icon="el-icon-refresh-right"> 清空</vxe-button>
        </div>
      </div>
      <div v-show="metaSortShow" class="meta-sort">
        <metaSort ref="metaSort" :metaData="metaData" :dict_package="dict_package" :dict_meta="dict_meta" />
      </div>
      <vxe-grid
        v-show="tableColumn.length!=0"
        border
        row-key
        highlight-hover-row
        highlight-hover-column
        ref="xTable2"
        max-height="800"
        :loading="loading"
        class="sortable-tree-demo"
        v-bind="gridOptions2"
        :scroll-y="{enabled: false}"
        :columns="tableColumn"
        :tooltip-config="{showAll: true, enterable: true, contentMethod: showTooltipMethod}"
        :data="tableTreeData">
          <template #toolbar_buttons>
            <el-button size="small" type="primary" icon="el-icon-printer" @click="$refs.xTable2.openPrint()">打印</el-button>
            <el-button size="small" type="primary" icon="el-icon-download" @click="$refs.xTable2.openExport()">导出</el-button>
            <el-button size="small" type="primary" :icon="zoomIcon?'el-icon-full-screen':'el-icon-copy-document'" @click="clickZoom">{{zoomIcon?'全屏':'恢复'}}</el-button>
          </template>
          <template #top>
            <h3>测量数据</h3>
          </template>
          <template #meta_default="{columnIndex,column,rowIndex,row}">
            <vxe-input v-if="!dict_character2num[column.params.metaId]" :disabled="row[column.params.metaId].algo==1||row[column.params.metaId].disabled||row.readonly"
              :class="row[column.params.metaId].validate == 1?'validate-border':''" :placeholder="row[column.params.metaId].algo==1?'计算指标':''"
              @input="inputChange(row,column,$event)"
              @blur="inputBlur(row,column)">
            </vxe-input>
             <el-select
               v-else
               v-model="row[column.params.metaId].valueDisplay"
               filterable
               allow-create
               size="small"
               placeholder=""
               clearable
               @change="inputChange(row,column,$event)"
               :class="row[column.params.metaId].validate == 1?'validate-border':''"
               :disabled="row[column.params.metaId].algo==1||row[column.params.metaId].disabled||row.readonly"
               default-first-option
               >
               <el-option
                 v-for="(value,key,index) in dict_character2num[column.params.metaId]"
                 :key="index"
                 :label="key"
                 :value="value">
               </el-option>
             </el-select>
          </template>
          <template #save_default="{columnIndex,column,rowIndex,row}">
            <el-button v-show="!row.readonly" @click="save(row,column)" type="primary" size="mini" icon="iconfont icon-save"></el-button>
          </template>
        </vxe-grid>
    </div>
    <vxe-modal v-model="playerSortModal" title="人员排序" min-height="300" show-zoom resize width="600" show-footer>
      <template #default>
        <playerSort v-if="playerSortModal" ref="playerSort" :playerArr="form.playerId" :playerSortkey="playerSortkey" :dict_player="dict_player" @playerSortChange="playerSortChange" />
      </template>
      <template #footer>
        <el-button @click="playerSortEnd" type="danger" icon="el-icon-s-promotion" size="mini">确定</el-button>
        <el-button @click="playerSortModal=false" size="mini"> 取消</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import {pcm4coach,currentRolePlayer,sport_by_org,coach_by_org,pcm4player,meta_all} from '@/api/dict.js'
  import {meta_scenario,template_allByUsageId,template_package,tableHeader4Sort,byTemplateId,checkAvailableOfAInput,insertComplex} from '@/api/meta.js'
  import playerSort from '@/components/Sort/playerSort.vue'
  import metaSort from '@/components/Sort/metaSort.vue'

  export default {
    components: {
      playerSort,
      metaSort
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          },{
            text: '一月前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', date);
            }
          },{
            text: '一年前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30 * 12);
              picker.$emit('pick', date);
            }
          },]
        },
        usageId: this.$route.meta.usageId,
        dict_usage: this.$store.state.user.dict_usage,
        form: {
          playerId: [],
          createDate: new Date(),
          templateId: '',
          sportId: '',
          coachId: '',
          scenarioId: '6',
          packageId: [],
        },
        loading: false,
        playerOptions: [],
        currentPlayer: {},
        dict_player: {},
        dict_sport: {},
        dict_coach: {},
        dict_template: {},
        dict_package: {},
        dict_scenario: {},
        dict_meta: {},
        sportData: {},
        coachData: {},
        playerData: [],
        templateData: [],
        packageData: [],
        metaData: {},
        metaDataArr: [],
        rules: {
          playerId: [{
            required: false,
            message: '这是必选项',
            trigger: 'change'
          }, ],
          createDate: [{
            required: true,
            message: '这是必选项',
            trigger: 'change'
          }, ],
          templateId: [{
            required: true,
            message: '这是必选项',
            trigger: 'change'
          }, ],
          coachId: [{
            required: true,
            message: '这是必选项',
            trigger: 'change'
          },]
        },
        showHelpTip2: false,
        gridOptions2: {
          border: true,
          columnKey: true,
          class: 'sortable-column-demo',
          scrollX: {
            enabled: false
          },
          toolbarConfig: {
            // export: true,
            // print: true,
            // zoom: true,
            custom: true,
            slots: {
              buttons: 'toolbar_buttons'
            }
          },
          editConfig: {
            trigger: 'click',
            mode: 'cell',
            // icon: 'fa fa-pencil-square-o'
          },
          exportConfig: {
            filename: '空表导出',
            sheetMethod: this.sheetMethod,
            beforeExportMethod: this.beforeExportMethod,
            isColgroup: true,
            types: ['csv'],
            modes: []
          },
          printConfig: {
            columns: [{ field: 'player' }],
            beforePrintMethod: this.beforePrintMethod,
          },
        },
        printColumn: [],
        tableTreeData: [],
        tableColumn: [],
        columnEnd: {
          width: 50,
          fixed: 'right',
          slots: {
            default: () => {
              return [
                <el-button onClick="this.save()" icon="iconfont icon-save" type="primary" size="small"></el-button>
              ]
            },
          }
        },
        playerSortModal: false,
        playerSortkey: [],
        metaSortText: '指标排序',
        metaSortShow: false,
        validate: true,
        dict_character2num: {
            "169": {"Normal": "0", "+": "2", "++": "4", "+++": "8"},
            "170": {"-": "0", "+-": "100", "+": "250", "++": "500", "+++": "1000", "++++": "1500"},
            "171": {"-": "0.4", "+": "0.7", "++": "1.9", "+++": "5"},
            "172": {"-": "0", "+-": "5", "+": "15", "++": "40", "+++": "100"},
            "174": {"-": "0", "+-": "10", "+": "25", "++": "80", "+++": "200", "++++": "900"},
            "176": {"-": "15", "+-": "30", "+": "70", "++": "100", "+++": "300", "++++": "1000"},
            "177": {"-": "0.04", "+": "0.05"},
            "178": {"-": "0", "+-": "15", "+": "70", "++": "125", "+++": "500"},
        },
        zoomIcon: true,
        massInputFormDataShow: false,
        formData2localName: '',
        searchDataChecked: false,
      }
    },
    created() {
      this.init_dict().then(()=>{
        this.templateChange()
      })
    },
    mounted() {
      this.formData2localName = 'massInputFormData-'+this.usageId+'-'+window.sessionStorage.getItem('roleId')+'-'+window.sessionStorage.getItem('userId')
      if(window.localStorage.getItem(this.formData2localName)) {
        this.massInputFormDataShow = true
      }else{
        this.massInputFormDataShow = false
      }
    },
    methods: {
      clickZoom() {
        this.zoomIcon = !this.zoomIcon
        this.$refs.xTable2.zoom()
      },
      beforePrintMethod({ content, options }) {
        if(options.original){
          this.$message.error('不支持源数据打印,请取消勾选')
          return '<h1>不支持源数据打印，请取消勾选！</h1>'
        }else{
          return content
        }
      },
      beforeExportMethod({ options }) {
        if(options.original){
          this.$message.error('不支持源数据导出,请取消勾选')
        }
      },
      showTooltipMethod ({ type, column, row, items, _columnIndex }) {
        const { params } = column
        if(params && params.tip && params.tip!=''){
          return params.tip
        }else{
          return ''
        }
      },
      metaSortEvent() {
        if(this.metaSortShow) {
          this.metaSortText = '指标排序'
          this.metaSortShow = false
        }else{
          this.init_meta_sort()
          this.metaSortText = '收起排序'
          this.metaSortShow = true
        }
      },
      packageChange(val) {
        this.init_meta_sort()
      },
      packageSelectAll() {
        this.form.packageId = []
        this.packageData.forEach(item=>{
          this.form.packageId.push(item.packageId+'')
        })
        this.init_meta_sort()
      },
      init_meta_sort() {
        let package_meta = {}
        this.metaDataArr.forEach(item=>{
          if(package_meta[item.packageId]){
            package_meta[item.packageId].push(item.metaId)
          }else{
            package_meta[item.packageId] = []
            package_meta[item.packageId].push(item.metaId)
          }
        })
        let obj = {}
        if(this.form.packageId.length!=0){
          this.form.packageId.forEach(item=>{
            obj[item] = package_meta[item]
          })
          this.metaData = obj
        }else{
          this.metaData = package_meta
        }
      },
      playerSortChange(arr) {
        this.form.playerId = arr
      },
      playerSortEnd() {
        window.localStorage.setItem(JSON.stringify(this.playerSortkey),JSON.stringify(this.form.playerId))
        this.playerSortModal = false
      },
      playerSort(bool) {
        this.playerSortkey = this.sortArr(this.form.playerId)
        let newArr = window.localStorage.getItem(JSON.stringify(this.playerSortkey))
        if(newArr){
          this.form.playerId = JSON.parse(newArr)
        }
        if(bool){
          this.playerSortModal = true
        }
      },
      sortArr(arr) {
        if(arr.length==0){
          return arr
        }
        arr.sort(function compareFunction(a, b) {
          return a-b
        })
        return arr
      },
      async save(row,column) {
        this.validate = true
        for(let key in row){
          if(row[key].validate && row[key].validate==1){
            this.validate = false
            break
          }
        }
        if(!this.validate) {
          this.$message.warning('有数据格式不正确，请检查！')
          return
        }else{
          let successCount = 0
          let errorCount = 0
          for(let key in row){
            if(row[key].algo == 1){
              row[key].valueDisplay = '-1'
            }
            if(row[key].valueDisplay && !row[key].disabled){
              let data = {
                valueDisplay: row[key].valueDisplay,
                templateId: this.form.templateId,
                playerId: row.playerId,
                createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD') + " 00:00:00",
                empId: this.form.coachId,
                metaId: row[key].metaId,
                scenarioId: row[key].scenarioId,
                createTime: this.$moment(this.form.createDate).format('YYYY-MM-DD HH:mm:ss'),
                usageId: this.usageId,
                mapId: row[key].mapId
              }
              await insertComplex(data).then(res=>{
                if(res.code === 200 ){
                  row.readonly = true
                  successCount += 1
                }else{
                  this.$message.error(this.dict_meta[data.metaId]+'保存失败!')
                  errorCount += 1
                }
              })
            }
          }
          if(successCount){
            this.$message.success('共'+successCount+'条数据保存成功!')
          }
          if(errorCount){
            this.$message.error('共'+errorCount+'条数据保存失败!')
          }
        }

      },
      inputBlur(row,column) {
        let item = row[column.params.metaId]
        let data = {
        	usageId: this.usageId,
        	templateId: this.form.templateId,
        	scenarioId: item.scenarioId,
        	metaId: item.metaId,
        	playerId: row.playerId,
        	mapId: item.mapId,
        	createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD') + " 00:00:00"
        }
        checkAvailableOfAInput(data).then(res => {
        		if (res.data.data == 0) {
        			item.valueDisplay = ''
        			item.disabled = true
        		} else {
        			item.disabled = false
        		}
        	})
      },
      inputChange(row,column,e) {
        let item = row[column.params.metaId]
        let value = ''
        if(this.dict_character2num[column.params.metaId]){
          value = e
        }else{
          value = e.value.trim()
        }
        item.valueDisplay = value
        let time_reg = new RegExp('^([0-9]{1,2}:)?([0-9]{1,2}\')?([0-9]{1,2}\")?([0-9]{1,3})?$') // 时间的正则判定式
        let float_reg = new RegExp("^-?\\d*\\.\\d{1,4}$|^-?\\d+$"); // 浮点的正则判定式
        let optionArr = [1,2,3,4,5]; // 选项的正则判定式
        if (value != '') {
        	if (item.converterId == 4) {
        		if (time_reg.test(value)) {
        			item.validate = 0
        		} else {
        			item.validate = 1
        		}
        	} else if (item.converterId == 5) {
        		if (optionArr.indexOf(parseInt(value))>-1) {
        			item.validate = 0
        		} else {
        			item.validate = 1
        		}
        	} else if (item.converterId != 4 && item.converterId != 5) {
        		if (float_reg.test(value)) {
        			item.validate = 0
        		} else {
        			item.validate = 1
        		}
        	}
        } else {
        	item.validate = 0
        }

      },
      tableClear() {
        this.tableColumn = []
        this.tableTreeData = []
      },
      getLocalStorage2form() {
        let formData = JSON.parse(window.localStorage.getItem(this.formData2localName))
        this.form.createDate = formData.createDate
        this.form.templateId = formData.templateId
        this.form.scenarioId = formData.scenarioId
        this.form.sportId = formData.sportId
        this.templateChange()
        this.form.coachId = formData.coachId
        this.coachChange()
        this.form.playerId = formData.playerId
        this.form.packageId = formData.packageId
      },
      setLocalStorage2form() {
        window.localStorage.setItem(this.formData2localName,JSON.stringify(this.form))
        this.massInputFormDataShow = true
      },
      submitEnter() {
        this.rules.playerId[0].required = true
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.setLocalStorage2form()
            this.playerSort(false)
            this.loading = true
            let newMetaArr = this.$refs.metaSort.getNewMetaArr('meta')
            if(!newMetaArr[newMetaArr.length-1]){
              newMetaArr.splice(newMetaArr.length-1,1)
            }
            let data = {
              templateId: this.form.templateId,
              scenarioId: this.usageId==1||this.usageId==2?0:this.form.scenarioId,
              usageId: this.usageId,
              metaIdsStr: '('+newMetaArr.join(',')+')',
            }
            tableHeader4Sort(data).then(res=>{
              if(res.code === 200) {
                let defaultData = []
                let defaultColums = []
                let metaArr = []
                let package2metas = res.data.package2metas
                // 排完序的包和指标对象
                let package2meta = this.$refs.metaSort.getNewMetaArr()
                let newPackageMeta = package2meta.packageMeta
                let sortend = package2meta.sortend
                // 保存起来
                let packageKey = []
                if(this.form.packageId.length!=0) {
                  packageKey = this.sortArr(this.form.packageId)
                }else{
                  packageKey = Object.keys(this.dict_package)
                }
                let loaclPackageMeta = window.localStorage.getItem(JSON.stringify(packageKey))
                if(loaclPackageMeta){
                  if(sortend){
                    window.localStorage.setItem(JSON.stringify(packageKey),JSON.stringify(newPackageMeta))
                  }else{
                    newPackageMeta = JSON.parse(loaclPackageMeta)
                  }
                }else{
                  window.localStorage.setItem(JSON.stringify(packageKey),JSON.stringify(newPackageMeta))
                }
                for(let k in newPackageMeta){
                  let key = k.split('_')[1]
                  // 包名
                  let packageObj = {
                    // field: '',
                    title: this.dict_package[key],
                    align: "center",
                    // width: 50,
                    headerClassName: 'bgColor',
                  }
                  // 指标
                  let children = []
                  if(newPackageMeta[k].length!=0 && package2metas[key].length!=0){
                    let dict_meta_item = {}
                    package2metas[key].forEach(item=>{
                      dict_meta_item[item.metaId] = item
                    })
                    newPackageMeta[k].forEach(item=>{
                      if(dict_meta_item[item]) {
                        children.push({
                          field: item,
                          title: this.dict_meta[item]+(dict_meta_item[item].unitName?'('+dict_meta_item[item].unitName+')':''),
                          width: 120,
                          params: {
                            ...dict_meta_item[item]
                          },
                          slots: {
                            // 使用插槽模板渲染
                            default: 'meta_default',
                          }
                        })
                        metaArr.push(dict_meta_item[item])
                      }
                    })
                    packageObj['children'] = children
                    defaultColums.push(packageObj)
                  }
                }
                // 姓名
                defaultColums.unshift({
                  field: 'player',
                  title: '姓名',
                  fixed: 'left',
                  width: 80,
                })
                defaultColums.push({
                  field: '',
                  title: '保存',
                  fixed: 'right',
                  width: 80,
                  slots: {
                    // 使用插槽模板渲染
                    default: 'save_default',
                  }
                })
                 this.form.playerId.forEach(item=>{
                   let obj = {}
                   obj['player'] = this.dict_player[item]
                   obj['playerId'] = item
                   obj['readonly'] = false
                    metaArr.forEach(meta=>{
                      meta.validate = 0
                      meta.disabled = false
                      obj[meta.metaId] = {
                        valueDisplay: '',
                         ...meta
                      }
                    })
                    defaultData.push(obj)
                 })
                 this.tableColumn.push(...defaultColums)
                 this.tableTreeData = defaultData
                 this.loading = false
              }else{
                this.$message.error(res.message)
              }
            })
          }else{
            return false
          }
        })
      },
      searchDateChange(val) {
        if(this.form.coachId){
         this.coachChange() 
        }
      },
      coachChange(val) {
        this.form.playerId = ''
        this.playerData = {}
        let data = {
          coachId: this.form.coachId || val,
        }
        if(this.searchDataChecked){
          data.searchDate = this.$moment(this.form.createDate).format('YYYY-MM-DD HH:mm:SS')
        }
        pcm4player(data).then(res=>{
          this.playerData = res
        })
      },
      template_package() {
        this.dict_package = {}
        template_package(this.form.templateId).then(res=>{
          this.packageData = res.data
          res.data.forEach(item=>{
            this.dict_package[item.packageId] = item.shortName
          })
          this.metaByTemplateId()
        })
      },
      templateChange(val) {
        if(this.usageId == 3 || this.usageId == 4){
          this.template_package()
        }else{
          this.coachData = {}
          this.form.coachId = ''
          this.form.playerId = ''
          this.form.packageId = []
          this.playerData = {}
          if(val) {
            this.templateData.forEach(item=>{
              if(item.templateId == val){
                this.form.sportId = item.sportId=='0'? Object.keys(this.sportData)[0] :item.sportId
              }
            })
          }
          let data = {
            sportId: this.form.sportId,
          }

          pcm4coach(data).then(res=>{
            this.coachData = res
          })
          this.template_package()
        }
      },
      metaByTemplateId(){
        byTemplateId({templateId: this.form.templateId}).then(res=>{
          this.metaDataArr = res.data
          this.init_meta_sort()
        })
      },
      init_dict() {
        return new Promise((resolve,reject)=>{
          currentRolePlayer().then(res=>{
            this.dict_player = res
          })
          sport_by_org().then(res=>{
            this.dict_sport = res
            this.sportData = res
          })
          coach_by_org().then(res=>{
            this.dict_coach = res
            this.coachData = res
          })
          meta_scenario().then(res=>{
            res.data.forEach(item=>{
              this.dict_scenario[item.scenarioId] = item.name
            })
            if(this.usageId == 4) {
              this.dict_scenario = {6:'晨空腹'}
            }
          })
          meta_all().then(res=>{
            this.dict_meta = res
          })
          template_allByUsageId({usageId:this.usageId}).then(res=>{
            this.templateData = res.data
            res.data.forEach(item=>{
              this.dict_template[item.templateId] = item.name
            })
            this.form.templateId = this.templateData[0].templateId
            this.form.sportId = this.templateData[0].sportId==0?Object.keys(this.sportData)[0]:this.templateData[0].sportId
          }).then(()=>{
            this.template_package()
            this.metaByTemplateId()
            resolve()
          })
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding: 20px;
    .form{
      padding: 0 100px;
    }
    .meta-sort{
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px 0;
    }
    .sortable-tree-demo .drag-btn {
      cursor: move;
      font-size: 12px;
    }
    .validate-border{
      border: 1px solid red;
      border-radius: 5px;
    }
  }

</style>
